<template>
    <Evaluation>
      <view class="backBtn" @click="handelBack">
        <image src="../..//static/image/backBtn.png" mode=""></image>
      </view>
      <view class="evaluation">
<!--        <view class="title">-->
<!--          <view class="titleText">{{ testForm?.title }}</view>-->
<!--        </view>-->
        <view class="evalLeft">
          <view class="leftTitle">" 量表测试</view>
          <view class="leftImage">
<!--            <image src="../..//static/image/cp_tubiao.png" mode=""></image>-->
          </view>
          <view class="leftContent">
            <view class="itemBox">
              <view class="contTitle num"><span class="cNumber">{{ testForm?.subCnt }}</span> 题</view>
              <view class="center num">题目数量</view>
            </view>
            <view class="itemBox">
              <view class="contTitle"><span class="cNumber">{{ testForm?.testTime }}</span>分</view>
              <view class="center">答题时间</view>
            </view>
          </view>
        </view>
        <view class="evalRight">
          <view class="rightContent">
                        {{ testForm?.content }}
<!--            般健康问卷(The General Health Questionnair, GHQ)是David Goldberg中文版GHQ-12已被证实可作为精神疾病流行病学调查和社区卫生服务识别心理障碍的筛选工具。该问卷总分可以作为心理健康状况的总体指标，分数愈高，心理健康状况愈差。-->
          </view>
          <view class="rightGuide">
            <view class="tip">
              <image src="../..//static/image/cp_guide.png"></image>
            </view>
            <view class="content">
              <p v-for="item in testForm?.guidelines">
                {{ item }}
              </p>
<!--              下面是有关你近10天状态的问题，请你仔细阅读每一个题目，然后根据你自己的实际情况认真填写。每一个题目没有对错之分，请你尽快回答，不要在每道题上过多思考。-->
            </view>
          </view>
        </view>
<!--        <view class="contentTop">-->
<!--          <view class="content">-->
<!--            <view class="itemBox">-->
<!--              <view class="contTitle num"><span class="cNumber">{{ testForm?.subCnt }}</span> 题</view>-->
<!--              <view class="center num">题目数量</view>-->
<!--            </view>-->
<!--            <view class="itemBox">-->
<!--              <view class="contTitle"><span class="cNumber">{{ testForm?.testTime }}</span>分</view>-->
<!--              <view class="center">预计用时</view>-->
<!--            </view>-->
<!--          </view>-->
<!--          <view class="abstract">-->
<!--            {{ testForm?.content }}-->
<!--            &lt;!&ndash;					dhasjdhasjkdhsjakdhjsdhasjdhsjakdhsjakhdsjakdhasjk&ndash;&gt;-->
<!--          </view>-->
<!--        </view>-->

<!--        <view class="contentText">-->
<!--          <view class="robot">-->
<!--            <image src="../../static/image/robot.png" mode=""></image>-->
<!--          </view>-->
<!--          <view class="instruction">-->
<!--            <view class="inTitle">指导语：</view>-->
<!--            <view class="instructionText">-->
<!--              <p v-for="item in testForm?.guidelines">-->
<!--                {{ item }}-->
<!--              </p>-->
<!--            </view>-->
<!--          </view>-->

        </view>

      <view class="beginBtn" @click="handleAnswer">
        开始测试
      </view>
<!--      <view class="modelBox" v-if="cpShow">-->
<!--        <view class="modelLeft animate__animated animate__fadeOutLeft">-->
<!--          <image src="../../static/image/leftMen.png" mode=""></image>-->
<!--        </view>-->
<!--        <view class="modelRight animate__animated animate__fadeOutRight">-->
<!--          <image src="../../static/image/rightMen.png" mode=""></image>-->
<!--        </view>-->
<!--      </view>-->
    </Evaluation>
</template>

<script setup lang="ts">
	import { getAnswerForm, setAnswerForm } from "@/api/answerPage";
	import { getSessionStorage } from "@/utils";
	import { onMounted, ref } from "vue";
  import Evaluation from "@/components/links/first.vue";
  import {useRouter} from "vue-router";
  import {backHome} from "@/utils/event";
	const router = useRouter()
  onMounted(() => {
		// answerForm()
	})
	const testForm = ref()
	const answerForm = () => {
		getAnswerForm().then(({ scale } : any) => {
			if (scale.id) {
				testForm.value = scale
				testForm.value.guidelines = scale.guidelines.split("；")
			}
		})
	}
	const cpShow = ref(false)
	const handleAnswer = () => {
		uni.showToast({
			title: "即将开始测评！",
			icon: 'none'
		})
		cpShow.value = true
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/answerPage/answerPage?id=' + 10,
			})
		}, 1000)
		// const userInfo = getSessionStorage('Info')
		// console.log(userInfo.userId)
		// const params = {
		//   scaleId: testForm.value.id,
		//   uid: userInfo.userId,
		//   createdTime: new Date().getTime(),
		// }
		// setAnswerForm(params).then(res => {
		//   console.log(res)
		//   if (res) {
		//     uni.showToast({
		//       title:"即将开始测评！",
		//       icon:'none'
		//     })
		//     cpShow.value = true
		//      (() => {
		//       uni.navigateTo({
		//         url:'/pages/answerPage/answerPage?id=' + res.id,
		//       })
		//     }, 1500)
		//   }
		// })
	}
  const handelBack = ()=>{
    backHome(1)
  }
</script>

<style scoped lang="scss">
	.modelBox {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		display: flex;

		.modelLeft,
		.modelRight {
			height: 422.66rpx;
			animation-duration: 2s;

			/* don't forget to set a duration! 翻译 不要忘记设置一个持续时间! */
			image {
				width: 100%;
				height: 100%;
			}
		}

		.modelLeft {
			position: absolute;
			left: 0;
			top: 0;
			width: 50%;
		}

		.modelRight {
			position: absolute;
			right: 0;
			top: 0;
			width: 54%;
		}
	}
  .backBtn {
    position: absolute;
    left: 25.4rpx;
    top: 14.06rpx;
    width: 62.79rpx;
    height: 26.91rpx;
    image {
      //box-shadow: 30px 30px 30px rgba(255, 255, 255, 0.15);
      width: 100%;
      height: 100%;
    }
  }

  .evaluation {
    margin: 0 auto;
    position: relative;
    padding: 24rpx 56rpx;
    display: flex;

    .evalLeft{
      width: 250rpx;
      .leftTitle{
        height: 38.22rpx;
        font-weight: 600;
        font-size: 27.3rpx;
        color: #00FFF2;
        letter-spacing: 2rpx;
      }
      .leftImage{
        width: 130rpx;
        height: 120rpx;
        margin-left: 75rpx;
        margin-top: 10rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .leftContent{
        margin-top: 10rpx;
        margin-left: 49rpx;
        display: flex;
        width: 110rpx;
        justify-content: space-between;
        .itemBox{
          font-size: 9rpx;
          color: #00FFF2;
          .cNumber{
            font-size: 20rpx;
            font-family: AgencYr;
          }
        }
      }
    }
    .evalRight{
      flex: 1;
      padding-top: 44rpx;
      padding-left: 20rpx;
      font-weight: 400;
      font-size: 8.58rpx;
      color: #00FFF2;
      letter-spacing: 0;
      line-height: 15.6rpx;
      .rightContent{
        text-indent: 2em;//首行缩进
        min-height: 62.4rpx;
      }
      .rightGuide{
        margin-top: 26rpx;
        .tip{
          width: 62rpx;
          height: 17rpx;
          margin-bottom: 10rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      left: 50%;
      height: 53.91rpx;

      .titleText {
        width: 262.89rpx;
        //height: 48px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 13.28rpx;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
      }
    }

    .contentTop {
      display: flex;
      height: 95.31rpx;

      .content {
        width: 171.88rpx;
        display: flex;
        gap: 16.41rpx;
        align-items: center;
        //position: absolute;
        //left: 143px;
        //top: 150px;
        .itemBox {
          width: 76.17rpx;
          height: 46.88rpx;
          border-radius: 11.72rpx;
          font-size: 7.81rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #FF8585FF;
          font-weight: 400;
          letter-spacing: 0;
          text-align: center;

          .contTitle {
            margin-bottom: 3.91rpx;

            .cNumber {
              font-size: 23.44rpx;
              font-weight: bold;
              margin-right: 1.95rpx;
            }
          }

          .num {
            color: #85D6FF;
          }
        }
      }

      .abstract {
        margin-top: 27.34rpx;
        margin-left: 25rpx;
        text-indent: 2em;
        height: 46.88rpx;
        overflow-y: scroll;
        color: #85d6ff;
        font-size: 7.81rpx;
        line-height: 15.63rpx;
        font-weight: 400;
        letter-spacing: 0;
        text-align: left;
      }
    }


    .contentText {
      margin-top: 19.53rpx;
      font-size: 7.03rpx;
      line-height: 14.06rpx;
      padding: 15.63rpx;
      display: flex;
      justify-content: space-between;
      position: relative;

      .abstract {
        text-indent: 2em;
      }

      .instruction {
        width: 371.09rpx;
        padding-left: 20rpx;
        .inTitle {
          font-weight: 500;
          font-size: 10.16rpx;
          color: #85D6FF;
          letter-spacing: 0;
          position: relative;
          margin-bottom: 7.81rpx;
        }

        .inTitle::before {
          content: '';
          width: 2.34rpx;
          height: 9.38rpx;
          background-color: #85D6FF;
          position: absolute;
          top: 2.34rpx;
          left: -4.69rpx;
        }

        .instructionText {
          font-weight: 400;
          font-size: 7.81rpx;
          color: #85D6FF;
          letter-spacing: 0;
          line-height: 13.28rpx;
          max-height: 79.69rpx;
          overflow-y: scroll;

          p {
            margin: 0;
          }
        }
      }

      .robot {
        position: relative;
        width: 140.63rpx;
        height: 140.63rpx;

        image {
          position: absolute;
          top: -36.72rpx;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }

    }
  }

  .beginBtn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    //bottom: 15rpx;
    width: 125rpx;
    height: 37.11rpx;
		background-image: url('../../static/image/all_Btn.png');
    background-size: 100% 100%;
    margin-top: 15rpx;
    font-weight: 500;
    font-size: 10.92rpx;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 37.11rpx;
  }
</style>
